<template>
  <div class="common-layout">
    <el-container>
      <el-header class="title">
        <el-button
          type="primary"
          size="large"
          style="font-weight: bold; margin-top: 13px"
          class="derive"
          plain
          @click="comeBackCompany"
          >返回
        </el-button>
        <el-button
          type="primary"
          size="large"
          style="font-weight: bold; margin-top: 13px"
          class="derive"
          plain
          @click="goToHome"
          >首页
        </el-button>
      </el-header>
      <div class="java">
<!--        <img src="../../assets/java.jpg">-->
        <SvgIcon
              iconName="icon-java"
              style="margin-right: 5px"
              color="white"
            ></SvgIcon
            >
        <span class="span">Java源代码</span>
      </div>
      <el-container>
        <el-aside >
          <el-card shadow="never">
            <el-tree
          :data="javaFiles"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :default-expand-all="true"
        />
          </el-card>
        </el-aside>
        <el-main>
          <CodeMirror
          v-if="visible"
          v-model:code="code"
          :codeStyle="{  height: '100vh', fontSize: '16px' }"
        />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {Bottom} from "@element-plus/icons-vue";
import {defineAsyncComponent, onMounted, ref} from "vue";
import {Codemirror} from "vue-codemirror";
import {useRoute,useRouter} from "vue-router";
// import CodeMirror from "./CodeMirror.vue";
import {loadJavaFilesAPI, structureAPI,viewFileAPI} from "@/apis/anay.js";
const CodeMirror = defineAsyncComponent(()=>{
  return import("./CodeMirror.vue")
})

const defaultProps = {
  children: "children",
  label: "label",
};

const code = ref("No Data");
const route = useRoute();
const router = useRouter();
const javaFiles = ref([]);
const visible = ref(false)
const fileName = ref(null)

const goToHome = () => {
  router.push({
    name: "home",
  });
};

const comeBackCompany = () => {
  router.back();
}

const getJavaFile = async ()=>{
  visible.value = false
  const response = await viewFileAPI(fileName.value)
  code.value = response.data.content
  console.log(code.value)
  visible.value = true
}

const handleNodeClick = (javaFiles) => {
  if (!javaFiles.children){
    fileName.value = javaFiles.path
    getJavaFile()
  }
};

onMounted(async () => {
  const filepath = route.query.dex_output_dir;
  const response = await structureAPI(filepath);
  javaFiles.value = response.data.folder;
  code.value = response.data.content;
});
</script>

<style scoped>
.svg-icon{
  height: 45px;
  width: 45px;
}
.java{
  display: flex;
  margin: 5px 0 0 5px;
}
.el-aside{
  width: 400px;
}
.el-card{
  margin-top: 20px;
  height: 100vh;
}
.el-button {
  float: right;
  margin-right: 20px;
}

.title {
  position: sticky;
  right: 20px;
  top: 0;
  z-index: 9999;
  width: 100%;
  background-color: #fff;
  padding: 0 0;
  border-bottom: 1px solid rgb(194, 196, 197);
}
.span{
  margin-left: 5px;
  font-size: 25px;
  margin-top:15px
}
</style>